<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实现各种形状</title>
    <link href="style.css" rel="stylesheet"/>
</head>
<body>
<p>三角形</p>
<hr>
<div class="triangle">
    <h2>1</h2>
    <div class="triangle-1"></div>
    <h2>2</h2>
    <div class="triangle-2"></div>
    <h2>3</h2>
    <div class="triangle-3"></div>
    <h2>4</h2>
    <div class="triangle-4"></div>
    <h2>5</h2>
    <div class="triangle-5"></div>
    <h2>6</h2>
    <div class="triangle-6"></div>
</div>
<br/>
<p>四边形</p>
<hr>
<div class="square-1"></div>
<div class="square-2"></div>
<p>梯形</p>
<hr>
<div class="trapezoidal"></div>
<p>五边形</p>
<hr>
<div class="pentagon"></div>
<div class="pentagon-1"></div>
<p>六边形</p>
<hr>
<div class="hexagon"></div>
<p>八边形</p>
<hr>
<div class="octagon"></div>
<p>五角星</p>
<hr>
<div class="star"></div>
<p>六角星</p>
<hr>
<div class="sixStart"></div>
<p>半圆</p>
<hr>
<div class="semicircle"></div>
<p>扇形</p>
<hr>
<div class="fan"></div>
<p>球体</p>
<hr>
<div class="ball"></div>

<p>爱心</p>
<hr>
<div class="heart"></div>
<div class="heart-1"></div>
<p>无穷大符号</p>
<hr>
<div class="infinity"></div>
<p>钻石</p>
<hr>
<div class="diamond"></div>
<p>八卦图</p>
<hr>
<div class="gossip">
    <div class="gossip-1">
        <div class="dot"></div>
    </div>
    <div class="gossip-2">
        <div class="dot"></div>
    </div>
</div>
</body>
</html>
